<template>
  <div class="flex flex-col overflow-hidden">
    <a-input-search v-model:value="searchKey" placeholder="病历名称/助记码" @search="getTree" />
    <a-spin :spinning="loading" class="h-full" wrapper-class-name="h-full">
      <a-directory-tree
        v-if="treeData.length"
        v-model:selected-keys="selectedKeys"
        default-expand-all
        :tree-data="treeData"
        class="h-full overflow-hidden overflow-x-auto"
        :field-names="{
          key: 'treeId'
        }"
        @select="onSelectTemplate"
      >
        <template #icon="{ template }">
          <img v-if="template" :src="IconDocument" width="14" class="pb-1" />
          <img v-else :src="IconDirectory" width="14" class="pb-1" />
        </template>
        <template #title="item">
          <div class="inline-flex justify-between items-center w-full" @dblclick="onDoubleClick(item)">
            <div v-if="item.template" class="mr-2 truncate w-24" :title="item.templateName">{{ item.templateName }}</div>
            <div v-else class="mr-4 truncate w-24" :title="item.categoryName">{{ item.categoryName }}</div>
          </div>
        </template>
      </a-directory-tree>
      <a-empty v-else class="w-full h-full" />
    </a-spin>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { message } from 'ant-design-vue'
import IconDirectory from '@/assets/icons/icon-directory.svg'
import IconDocument from '@/assets/icons/icon-document.svg'
import useStore from '@/views/out-doctor/store'

const store = useStore()
const emit = defineEmits(['select'])

const loading = ref(true)
const searchKey = ref('')
const treeData = ref([])
const selectedKeys = ref([])

// 获取文书
const getTree = async () => {
  selectedKeys.value = []
  // treeData.value = []
  loading.value = true
  const { code, data, msg } = await post('/emr/emrCategory/getEmrCategoryByTree', {
    categroyTypes: [0, 4],
    status: 1,
    zjm: searchKey.value
  })
  loading.value = false
  if (code !== 0) return message.error(msg)
  treeData.value = data
  // addLevelFieldRecursive(treeData.value)
  // store.templateId && (selectedKeys.value = [store.templateId])
}
let timer = null
// 点击模版
const onSelectTemplate = (_, e) => {
  clearTimeout(timer)
  if (!e.node.template) return
  timer = setTimeout(() => {
    store.emrTemplateInfo = e.node
    store.emrTemplateDebounceClick = false
  }, 300)
}
// 双击模版
const onDoubleClick = (row) => {
  clearTimeout(timer)
  if (!row.template) return
  store.emrTemplateInfo = row
  selectedKeys.value = []
  store.emrTemplateDebounceClick = true
  emit('select')
}
watch(
  () => store.currentEMR?.id,
  (val) => {
    if (val) {
      selectedKeys.value = []
    }
  }
)
onMounted(() => {
  getTree()
  store.emrTemplateInfo = {}
})
// defineExpose({
//   getData: getTree
// })
</script>
<style lang="less" scoped>
.icon-color {
  color: var(--primary-color);
}
:deep(.ant-spin-container) {
  display: flex;
  flex-direction: column;
  height: 100%;
}
:deep(.ant-tree) {
  .ant-tree-list {
    height: 100%;
    overflow: auto;
  }
  .ant-tree-switcher {
    width: 16px !important;
  }
}
:deep(.ant-tree-indent-unit) {
  width: 16px !important;
}
:deep(.ant-tree-treenode) {
  display: flex;
  width: 100%;
  padding: 8px 0;
  button:not(.ant-btn-dangerous) {
    color: var(--primary-color);
  }
  .ant-tree-node-selected {
    button:not(.ant-btn-dangerous) {
      color: #fff;
    }
  }

  &:before {
    bottom: 0 !important;
  }
  .ant-tree-node-content-wrapper {
    display: flex;
    align-items: center;
    .ant-tree-title {
      flex: 1;
    }
  }
}
.radio-style {
  display: flex;
  :deep(.ant-radio-button-wrapper) {
    // width: 33.3%;
    flex: 1;
    padding: 0;
    text-align: center;
  }
}
</style>
